<template>
  <a-card :style='cardStyle'>
    <div class='flex-col'>
      <div class='flex-row'>
        <a-icon class='icon' type="pay-circle" theme="filled" style='color: #FFBF00;' />
        <span style='font-weight: 600;margin-bottom: 12px;font-size: 18px;'>{{ title }}</span>
      </div>
      <a-statistic title='总金额' :precision='2' :value='amount'>
        <template #suffix>
          <span>万</span>
        </template>
      </a-statistic>
    </div>
  </a-card>
</template>

<script>
export default {
  name: 'InfoCard',
  props: {
    selected: Boolean,
    title: String,
    amount: Number,
    pointer: Boolean,
    large: Boolean,
  },
  computed: {
    cardStyle() {
      const style = {
        minWidth: '220px'
      }
      if (this.selected) {
        style['border'] = 'solid 1px #5FB2FF'
      }
      if (this.pointer) {
        style['cursor'] = 'pointer'
      }
      if (this.large) {
        style['minWidth'] = '300px'
      }
      return style
    }
  }
}
</script>

<style scoped lang='less'>
::v-deep .ant-statistic-title {
  text-align: right;
  margin-bottom: 0;
  font-size: 12px;
}

::v-deep .ant-statistic-content {
  text-align: right;
}
::v-deep .ant-card-body {
  padding: 16px;
}

::v-deep .ant-statistic-content-value {
  font-weight: 600;
  font-size: 1.15em;
}

.flex-row {
  display: flex;
  flex-direction: row;
  //align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}
.icon{
  margin-top: 6px;
  margin-right: 12px;
}
</style>